<template>
	<view class="layout">
		<view class="item">
			<view class="itemLeft">
				<image class="itemLeftImage" src="../../static/home/u2012.png" mode=""></image>
				<text class="system">系统</text>
			</view>
			<view class="itemRight">
				<view class="itemRightTop">
					<text class="itemRightTopUser">系统通知</text>
					<text class="itemRightTopData">2020-01-09 18:19</text>
				</view>
				<view class="itemRightButtom">
					《劳务通平台隐私声明》已更新，请及时查看
				</view>
			</view>
		</view>
		<view class="item">
			<view class="itemLeft">
				<image class="itemLeftImage" src="../../static/home/u1994.png" mode=""></image>
			</view>
			<view class="itemRight">
				<view class="itemRightTop">
					<text class="itemRightTopUser">刘淼淼</text>
					<text class="itemRightTopData">2020-01-09 18:19</text>
				</view>
				<view class="itemRightButtom">
					报名了广东机电厂操作工
				</view>
			</view>
		</view>
		<view class="item">
			<view class="itemLeft">
				<image class="itemLeftImage" src="../../static/home/u2007.png" mode=""></image>
			</view>
			<view class="itemRight">
				<view class="itemRightTop">
					<text class="itemRightTopUser">周杰</text>
					<text class="itemRightTopData">2020-01-09 18:19</text>
				</view>
				<view class="itemRightButtom">
					报名了广东机电厂操作工
				</view>
			</view>
		</view>
		<view class="item">
			<view class="itemLeft">
				<image class="itemLeftImage" src="../../static/home/u2008.png" mode=""></image>
			</view>
			<view class="itemRight">
				<view class="itemRightTop">
					<text class="itemRightTopUser">袁小明</text>
					<text class="itemRightTopData">2020-01-09 18:19</text>
				</view>
				<view class="itemRightButtom">
					面试了广东机电厂操作工
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	   .layout{
		   padding: 30rpx;
		   .item{
			   border-bottom: 1px solid #ccc;
			   display: flex;
			   justify-content: space-between;
			   align-content: center;
			   padding: 20rpx 0;
			   .itemLeft{
				   position: relative;
				   .itemLeftImage{
					   width: 100rpx;
					   height: 100rpx;
				   }
				   .system{
					   position: absolute;
					   top: 30rpx;
					   left: 25rpx;
					   display: flex;
					   justify-content: center;
					   align-items: center;
					   z-index: 2;
					   font-size: 25rpx;
					   color: #fff;
				   }
			   }
			   .itemRight{
				   display: flex;
				   justify-content: space-between;
				   flex-direction: column;
				   width: 75vw;
				   padding: 10rpx 0;
				   .itemRightTop{
					   display: flex;
					   justify-content: space-between;
					   align-content: center;
					   
					   .itemRightTopData{
						   display: flex;
						   justify-content: center;
						   align-items: center;
						   color: #888;
						   font-size: 22rpx;
					   }
				   }
				   .itemRightButtom{
					   font-size: 26rpx;
					   padding: 0 8rpx;
				   }
			   }
		   }
	   } 
</style>
